<canvas id="canvas"  width="600" height="400"></canvas>
<script id="vs_s" type="text/plain">
	attribute vec3 po;
	attribute vec2 co;
	uniform mat4 pro;
	uniform mat4 rot;
	uniform mat4 mov;
	varying vec2 co_v;
	void main(){
		co_v=co;
		gl_Position=pro*mov*rot*vec4(po,1.0);
	}
</script>
<script id="fs_s" type="text/plain">
	varying highp vec2 co_v;
	uniform sampler2D tex;
	void main(){
		gl_FragColor=texture2D(tex,co_v);
	}
</script>
<script type="text/javascript">
	var webgl=canvas.getContext("experimental-webgl");
	var program=webgl.createProgram();
	var vs,fs;
	vs=webgl.createShader(webgl.VERTEX_SHADER);
	fs=webgl.createShader(webgl.FRAGMENT_SHADER);
	webgl.shaderSource(vs,vs_s.textContent);
	webgl.shaderSource(fs,fs_s.textContent);
	webgl.compileShader(vs);
	webgl.compileShader(fs);
	webgl.attachShader(program,vs);
	webgl.attachShader(program,fs);
	webgl.linkProgram(program);
	webgl.useProgram(program);

	var po=webgl.getAttribLocation(program,"po");
	webgl.enableVertexAttribArray(po);
	var co=webgl.getAttribLocation(program,"co");
	webgl.enableVertexAttribArray(co);

	var data=[-1,-1,-1, -1,1,-1, -1,1,1, -1,-1,1,
	1,-1,-1, 1,1,-1, 1,1,1, 1,-1,1,
	-1,1,-1, 1,1,-1, 1,1,1, -1,1,1,
	-1,-1,-1, 1,-1,-1, 1,-1,1, -1,-1,1,
	-1,-1,1, 1,-1,1, 1,1,1, -1,1,1,
	-1,-1,-1, 1,-1,-1, 1,1,-1, -1,1,-1];
	data=new Float32Array(data);
	var buf=webgl.createBuffer();
	webgl.bindBuffer(webgl.ARRAY_BUFFER,buf);
	webgl.bufferData(webgl.ARRAY_BUFFER,data,webgl.STATIC_DRAW);
	webgl.vertexAttribPointer(po,3,webgl.FLOAT,false,0,0);
	var temp=[];
	for(var i=0;i<data.length;i+=3){
		for(var j=0;j<3;j++){
			if(j!=(i/24|0)){
				temp.push((data[i+j]+1)/2);
			}
		}
	}

	temp=new Float32Array(temp);
	buf=webgl.createBuffer();
	webgl.bindBuffer(webgl.ARRAY_BUFFER,buf);
	webgl.bufferData(webgl.ARRAY_BUFFER,temp,webgl.STATIC_DRAW);
	webgl.vertexAttribPointer(co,2,webgl.FLOAT,false,0,0);
	var pro=webgl.getUniformLocation(program,"pro");
	var rot=webgl.getUniformLocation(program,"rot");
	var mov=webgl.getUniformLocation(program,"mov");
	webgl.uniformMatrix4fv(
		pro,false,(function(a,r,n,f){
			a=1/Math.tan(a*Math.PI/360);
			return [a/r,0,0,0,0,a,0,0,0,0,-(f+n)/(f-n),-1,0,0,-2*f*n/(f-n),0];
		})(45,canvas.width/canvas.height,1,100));
	webgl.uniformMatrix4fv(mov,false,[1,0,0,0,0,1,0,0,0,0,1,0,0,0,-10,1]);
	data=[];
	for(var i=0;i<24;i+=4){
		data.push(i+0,i+1,i+3,i+3,i+2,i+1);
	}
	data=new Uint16Array(data);
	buf=webgl.createBuffer();
	webgl.bindBuffer(webgl.ELEMENT_ARRAY_BUFFER,buf);
	webgl.bufferData(webgl.ELEMENT_ARRAY_BUFFER,data,webgl.STATIC_DRAW);
	webgl.enable(webgl.DEPTH_TEST);

	var img=new Image();
	img.src='images/Crate.bmp';
	img.onload=function(){
		// var tex=webgl.getUniformLocation(program,'tex');
		var texture=webgl.createTexture();
		webgl.activeTexture(webgl.TEXTURE0);
		webgl.bindTexture(webgl.TEXTURE_2D,texture);
		webgl.texImage2D(webgl.TEXTURE_2D,0,webgl.RGBA,webgl.RGBA,webgl.UNSIGNED_BYTE,img);
		webgl.texParameteri(webgl.TEXTURE_2D,webgl.TEXTURE_MIN_FILTER,webgl.LINEAR);
		// webgl.uniform1i(tex,0);
	};

	var a=0;
	setInterval(function(){
		a-=0.02;
		var s=Math.sin(a);
		var c=Math.cos(a);
		webgl.uniformMatrix4fv(rot,false,[c*c,-s,s*c,0,s*c,c,s*s,0,-s,0,c,0,0,0,0,1]);
		webgl.drawElements(webgl.TRIANGLES,36,webgl.UNSIGNED_SHORT,0);
	},20);

</script>